<template>
    <div class="privilege">
        <div class="privilege-head">
             <div class="head-card">
                 <div class="user-msg">
                     <div class="avatar-box">
                         <img :src="userInfo.headimgurl" alt="">
                     </div>
                     <div class="user-detail">
                         <span>{{userInfo.nickname}}</span>
                         <p>康不离商城<span>{{cardLv['name']}}</span></p>
                     </div>
                 </div>
                 <div class="card-num">
                     <p>NO:{{cardLv['id']}}</p>
                 </div>
             </div>
             <p class="card-des">购物时，付款可自动享受会员优惠</p>
        </div>
        <div class="privilege-des">
            <div class="level">
                <div class="level-head">
                    <div class="left">
                        <img src="~assets/icons/rights1.png" alt="">
                        <span>会员等级</span>
                    </div>
                    <span class="right">{{cardLv['name']}}</span>
                </div>
                <div class="level-des">
                    <div class="des-box">
                        <div class="des-head">
                            <img src="~assets/icons/rights4.png" alt="">
                            <span>{{cardLv['name']}}</span>
                        </div>
                        <div class="des-detail">
                            <span>1.{{cardLv.content}}</span>
                            <!-- <span>2.不与其他优惠共享。</span>
                            <span>3.付款时自动享受折扣。</span> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="rules" @click="toRights">
                <div class="left">
                    <img src="~assets/icons/rights2.png" alt="">
                    <span>会员特权</span>
                </div>
                <img src="~assets/icons/arrow.png" alt="" class="arrow">
            </div>
            <div class="rules" @click="toRules">
                <div class="left">
                    <img src="~assets/icons/rights3.png" alt="">
                    <span>会员规则</span>
                </div>
                <img src="~assets/icons/arrow.png" alt="" class="arrow">
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name:'privilege',
    data(){
        return {
            cardLv:{},
            userInfo:{}
        }
    },
    methods:{
        toRights(){
            this.$router.push('/members/rights');
        },
        toRules(){
            this.$router.push('/members/rules');
        },
        getCardLv(){
            let that = this;
            let token = localStorage.getItem('token');
            that.$ajax(that, 'get', that.$api.cardsDetail, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.cardLv = res.data['msg'][0];
                }else{
                    that.toast(res.data['msg']);
                }
            })
        },
        getUserInfo(){
            let that = this;
            let token = localStorage.getItem('token');
            let loader = that.loading();
            that.$ajax(that, 'get', that.$api.userInfo, null, token, function(res){
                if(res.data['msg']){
                    that.userInfo = res.data.msg;
                }else{
                    that.toast(re.data.msg)
                }
                loader.close();
            })
        }
    },
    mounted(){
        let title = sessionStorage.getItem('newTab');
        this.$store.state.tab = '会员卡';
        this.getCardLv();
        this.getUserInfo();
    },
    activated(){
        this.$store.state.tab = '会员卡';
        this.getCardLv();
    }
}
</script>

<style lang='less'>
@rem:100rem;

.privilege{
    width: 750/@rem;
    .privilege-head{
        width: 100%;
        background: #ffffff;
        padding-top: 50/@rem;
        .head-card{
            width: 690/@rem;
            height: 400/@rem;
            position: relative;
            margin: 0 auto;
            box-shadow: 0 3/@rem 7/@rem 0 
                rgba(0, 0, 0, 0.3);
            border-radius: 30/@rem;
            background-image:url('~assets/images/privilege_bg.png'); 
            background-repeat: no-repeat;
            background-size: 690/@rem 400/@rem;
            .user-msg{
                width: 100%;
                padding-top: 30/@rem;
                display: flex;
                .avatar-box{
                    height: 100/@rem;
                    width: 100/@rem;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    margin-left: 30/@rem;
                    img{
                        height: 100/@rem;
                    }
                }
                .user-detail{
                    text-align: start;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    margin-left: 20/@rem;
                    color: #666666;
                    span{
                        font-size: 30/@rem;
                    }
                    p{
                        font-size: 30/@rem;
                        margin-top: 10/@rem;
                        span{
                            margin-left: 20/@rem;
                            color: #6699ff;
                        }
                    }
                }
            }
            .card-num{
                position: absolute;
                bottom: 20/@rem;
                right: 20/@rem;
            }
        }
        .card-des{
            margin-top: 40/@rem;
            padding-bottom: 50/@rem;
        }
    }
    .privilege-des{
        width: 100%;
        background: #ffffff;
        .level{
            .level-head{
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 88/@rem;
                border-top: 1px solid #e5e5e5;
                border-bottom: 1px solid #e5e5e5;
                .left{
                    margin-left: 30/@rem;
                    display: flex;
                    align-items: center;
                    img{
                        width: 32/@rem;
                        height: 40/@rem;
                    }
                    span{
                        font-size: 30/@rem;
                        color: #666666;
                        margin-left: 14/@rem;
                    }
                }
                .right{
                    margin-right: 30/@rem;
                    font-size: 30/@rem;
                    color: #6699ff;
                }
            }
            .level-des{
                width: 100%;
                .des-box{
                    width: 700/@rem;
                    box-sizing: border-box;
                    padding: 20/@rem;
                    margin: 0 auto;
                    background-color: #f9f9f9;
                    border-radius: 10/@rem;
                    margin-top: 10/@rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    .des-head{
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        img{
                            width: 50/@rem;
                            height: 40/@rem;
                            margin-right: 25/@rem;
                        }
                        span{
                            font-size: 30/@rem;
                            color: #6699ff;
                        }
                    }
                    .des-detail{
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        margin-top: 25/@rem;
                        padding-left: 75/@rem;
                        font-size: 24/@rem;
                        color: #7c7c7c;
                        span{
                            line-height: 40/@rem;
                        }
                    }
                }
            }
        }
        .rules{
            width: 100%;
            height: 88/@rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #e5e5e5;
            border-bottom: 1px solid #e5e5e5;
            margin-top: 10/@rem;
            .left{
                display: flex;
                align-items: center;
                margin-left: 30/@rem;
                img{
                    height: 38/@rem;
                    width: 38/@rem;
                }
                span{
                    font-size: 30/@rem;
                    color: #666666;
                    margin-left: 14/@rem;
                }
            }   
            .arrow{
                height: 40/@rem;
                width: 40/@rem;
                margin-right: 30/@rem;
            }
        }
    }
}
</style>
